class LunBo {
    constructor() {
        // this.rightBtn = document.querySelector('.rightBtn')
        // this.leftBtn = document.querySelector('.leftBtn')
        this.oLis = document.querySelectorAll('.slidebox')
            // this.circles = document.querySelectorAll('.rslides_title li')
        this.box = document.querySelector('.lunbo')
        this.pageIndex = 0;
        let that = this;

        //this.changeCircles()

        //右键按钮添加点击事件
        // this.rightBtn.onclick = function() {
        //         that.nextPage()
        //     }
        //左键按钮添加点击事件
        // this.leftBtn.onclick = function() {
        //     animate(that.oLis[that.pageIndex], {
        //         opacity: 0
        //     })
        //     that.pageIndex--;
        //     if (that.pageIndex == -1) {
        //         that.pageIndex = 4;
        //     }
        //     animate(that.oLis[that.pageIndex], {
        //             opacity: 1
        //         })
        //         //that.changeCircles()
        // }

        //自动播放
        this.autoPlay = setInterval(() => {
            this.nextPage()
        }, 3000)

        //小圆点 的点击 和自动播放
        // for (let i = 0; i < this.circles.length; i++) {
        //     this.circles[i].onclick = function() {
        //         animate(that.oLis[that.pageIndex], {
        //             opacity: 0
        //         })
        //         that.pageIndex = i;
        //         animate(that.oLis[that.pageIndex], {
        //                 opacity: 1
        //             })
        //             //that.changeCircles()
        //     }
        // }
        //鼠标移入事件
        this.box.onmouseenter = function() {
                console.log('onmouseenter')
                clearInterval(that.autoPlay)
            }
            //鼠标移出
        this.box.onmouseleave = () => {
            console.log('onmouseleave')
            this.autoPlay = setInterval(() => {
                this.nextPage()
            }, 3000)
        }

    }

    //封装改变小圆点的颜色
    // changeCircles() {
    //         this.pageIndex;
    //         for (let j = 0; j < this.circles.length; j++) {
    //             this.circles[j].style.background = 'plum';
    //         }
    //         this.circles[this.pageIndex].style.background = 'white';
    //     }
    //封装下一页
    nextPage() {
        let that = this;
        animate(that.oLis[that.pageIndex], {
            opacity: 0
        })
        that.pageIndex++;
        if (that.pageIndex == 5) {
            that.pageIndex = 0;
        }
        animate(that.oLis[that.pageIndex], {
                opacity: 1
            })
            //this.changeCircles()
    }
}